<template>
  <div class="searchresult_list">
    <div class="searchresult_listmain">
      <div class="searchresult_listmain_tabheader">
        <div
          class="searchresult_listmain_tabheader_item"
          v-for="(item, index) in tabs"
          :key="item.tabKey + '_tabheader'"
          :class="currentTab === index ? 'on' : ''"
        >
          <a
            href="javascript:;"
            :title="item.tabTitle"
            @click="tabClickHandel(index)"
            >{{ item.tabTitle }}</a
          >
        </div>
      </div>
      <div class="searchresult_listmain_tabcontent">
        <div
          class="searchresult_listmain_tabcontent_panel"
          v-for="(item, index) in tabs"
          :key="item.tabKey + '_tabcontent'"
          v-if="currentTab === index"
        >
          <SearchResultTabList :tab="item"></SearchResultTabList>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "SearchResultList",
  components: {
    SearchResultTabList: () =>
      import(
        /* webpackChunkName: "SearchResultLists" */ "../../components/search/searchResultTabList.vue"
      ),
  },
  props: {
    items: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      tabs: [
        {
          tabTitle: this.$t("lang.帐户"),
          tabKey: "account",
        },
        {
          tabTitle: this.$t("lang.标签"),
          tabKey: "label",
        },
        {
          tabTitle: this.$t("lang.地点"),
          tabKey: "location",
        },
      ],
      currentTab: -1,
    };
  },
  mounted() {
    this.tabClickHandel(0);
  },
  methods: {
    tabClickHandel(index) {
      this.currentTab = index;
    },
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.searchresult_list {
  padding: 10 / @base 0;
  .searchresult_listmain {
    .searchresult_listmain_tabheader {
      margin: 0 10 / @base;
      display: flex;
      .searchresult_listmain_tabheader_item {
        width: 33.3333%;
        border: 1 / @base solid #ccc;
        background: #fff;
        padding: 5 / @base;
        &:first-child {
          border-top-left-radius: 5 / @base;
          border-bottom-left-radius: 5 / @base;
          border-right: 0;
        }
        &:last-child {
          border-top-right-radius: 5 / @base;
          border-bottom-right-radius: 5 / @base;
          border-left: 0;
        }
        &.on {
          color: #fff;
          background-color: rgb(165, 42, 42);
          a {
            color: #fff;
            font-weight: 700;
          }
        }
        a {
          display: block;
        }
      }
    }
    .searchresult_listmain_tabcontent {
    }
  }
}
</style>
